<template>


    <a-modal :title="title" :width="1200" :destroyOnClose="true"
             :maskClosable="false"
             :visible="visible" @cancel="handleCancel" :footer="false">

        <a-form-model layout="inline" @submit="onSubmit" @submit.native.prevent >
            <a-form-model-item label="时间设置">
                <a-range-picker
                        :show-time="{ format: 'HH:mm:ss' }"
                        format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="['测试开始时间', '测试结束时间']"
                        @change="changeTime"

                />
            </a-form-model-item>

            <a-form-model-item>
                <a-button   type="primary" html-type="submit">
                    开始测试
                </a-button>
            </a-form-model-item>




            <a-form-model-item label="测试时长"  v-if="dataSource.length>0">
                <span class="text-danger">{{duration}} </span>
            </a-form-model-item>
            <a-form-model-item  label="测试结果" v-if="dataSource.length>0" >
                <span class="text-danger">{{feeResult/100}}元 </span>
            </a-form-model-item>

        </a-form-model>


        <div class="result">
            <div class="box">
                <a-list :bordered="true" :data-source="dataSource" :loading="loading">
                    <a-list-item slot="renderItem" slot-scope="item, index">
                        {{ item }}
                    </a-list-item>

                </a-list>
            </div>
        </div>

    </a-modal>

</template>
<script>
    import {FeeRuleDetection} from "../../public/http";

    export default {
        props: ['record'],


        data() {
            return {

                title: "测试工具",

                visible: true, //modal 显示状态
                times: {
                    ruleCode: this.record.code,
                    startTime: null,
                    endTime: null
                },
                feeResult: null,
                dataSource: [],
                duration:null,
                loading: false,

            }
        },


        methods: {


            changeTime(time, timeString) {
                this.times.startTime = timeString[0];
                this.times.endTime = timeString[1];
            },

            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },


            //提交数据
            onSubmit() {
                this.loading = true;
                this.feeResult = null;
                FeeRuleDetection(this.times).then(res => {
                    if (res.code === 0) {
                        this.feeResult = res.data.result.fee;
                        this.dataSource = res.data.result.logs;
                        this.duration= res.data.result.duration;
                    }
                })

                this.loading = false;
            },


        },

        created() {
            this.title = "【" + this.record.groupName + "】" + this.record.vehicleTypeName + "_时段规规则测试";
        }
    };
</script>

<style scoped>

    .result {
        min-height: 150px;
        max-height: 500px;
        padding: 10px;

    }

    .result .box {

        max-height: 450px;
        overflow-y: scroll;
    }
</style>
